<template>
  <section
    class="h-28 flex items-center box-border px-9 py-4 border-b border-gray-400 mb-3"
  >
    <div class="w-20 h-full mr-5 box-border p-1 rounded shadow-md">
      <img class="h-full w-full" :src="user.avatar" />
    </div>
    <section class="h-16 flex flex-col justify-between">
      <p class="text-2xl">{{ userInformation.name }}</p>
      <p class="text-sm text-gray-400">{{ userInformation.sign }}</p>
    </section>
  </section>
  <section class="dynamic-row">
    <div class="dynamic-item">
      <span class="category-value">0</span>
      <span class="category-title">关注</span>
    </div>
    <div class="dynamic-item">
      <span class="category-value">0</span>
      <span class="category-title">粉丝</span>
    </div>
    <div class="dynamic-item">
      <span class="category-value">0</span>
      <span class="category-title">访客</span>
    </div>
    <div class="dynamic-item">
      <span class="category-value">0</span>
      <span class="category-title">收藏</span>
    </div>
  </section>

  <section class="functions">
    <van-cell-group>
      <van-cell title="我的测验" is-link to="/individual/test" />
      <van-cell title="测验结果" is-link to="/individual/result" />
      <van-cell title="关于我们" is-link />
      <van-cell title="常见问题" is-link />
      <van-cell title="客服电话" value="401-123131" is-link />
      <van-cell title="意见反馈" is-link />
    </van-cell-group>
  </section>

  <section
    class="border border-red-600 text-red-600 w-full h-12 flex justify-center items-center hover:bg-red-600 hover:text-white hover:font-bold transition-colors"
    @click="logout"
  >
    退出登录
  </section>
</template>

<script setup>
import { reactive } from 'vue'
import { useUserStore } from '@/store/user'
import { useRouter } from 'vue-router'
import { getStorage } from '@/utils/storage'
const userStore = useUserStore()
const router = useRouter()

const userInformation = reactive({
  name: getStorage('name'),
  sign: getStorage('sign'),
})

const user = reactive({
  name: '安小姐',
  sign: '生活不止眼前的苟且，还有诗和远方的田野',
  avatar:
    'https://young-1306090592.cos.ap-guangzhou.myqcloud.com/mental-app/default_avatar.jpg',
})

const logout = () => {
  userStore.logout()
  router.replace({ name: 'Login' })
}
</script>

<style scoped lang="scss">
.user-wrapper {
  // display: flex;
  // align-items: center;
  // box-sizing: border-box;
  // border-bottom: 1px solid #ccc;
  // margin-bottom: 12px;
  &:active {
    background-color: #eee;
  }
  .user-avatar {
    display: block;
    width: 60px;
    height: 60px;
    background-color: #fff;
    box-shadow: 0 0 5px 2px #666;
    border-radius: 50%;
    flex-grow: 0;
  }
  .user-sign {
    color: #aaa;
    font-size: 0.35rem;
    width: 32ch;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

.dynamic-row {
  width: 100vw;
  height: 48px;
  display: flex;
  justify-content: space-around;
  font-size: 16px;
  margin-bottom: 12px;

  .dynamic-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
  }
}
</style>
